<template>
  <div>
    <!-- 新增缺卡扣款规则 -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">新增缺卡扣款规则</span>
        </div>
        <div class="text item1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="方案名称" prop="name">
              <el-input v-model="ruleForm.name" class="input1"></el-input>
              <el-checkbox
                label="默认"
                name="type"
                style="margin-left: 20px"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="状态" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="textarea2"
                class="input2"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 缺卡扣款 -->
    <div class="div1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">缺卡扣款</span>
          <span
            style="float: right; padding: 3px 0"
            type="text"
            @click="shows()"
          >
            <input type="checkbox" v-model="checkbox1" />不扣款
          </span>
        </div>
        <div class="div2">
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            style="padding: 0px 5px 0 0"
          >
            <el-form-item label="计薪规则:">
              <!-- 单选框判断显示那个 -->
              <el-radio-group v-model="form.resource">
                <el-radio :label="1" @input="form.resource = '1'"
                  >系统规则</el-radio
                >
                <el-radio :label="2" @input="form.resource = '2'"
                  >自定义公式</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- 如果选择的是自定义公式展示这个 -->
            <div v-if="form.resource === 2">
              <el-form-item label="公式">
                <el-input type="textarea" disabled class="textarea1"></el-input>
                <el-button
                  plain
                  style="
                    margin-left: 20px;
                    margin-bottom: 21px;
                    padding: 8px 14px;
                    font-size: 10px;
                  "
                  @click="$router.push('/home/sums')"
                  >设置</el-button
                >
              </el-form-item>
            </div>
            <!-- 如果选择的是引用基数显示这个 -->
            <div v-if="form.resource === 1">
              <!-- 计薪比例 -->
              <el-form-item label="计薪比例:">
                <span>月累计缺卡次数</span>
                <el-input
                  value="0"
                  style="width: 10%; margin-left: 20px"
                  disabled="true"
                />
                <span style="margin-left: 10px; font-size: 18px">至</span>
                <el-input
                  v-model="form.days"
                  style="width: 10%; margin-left: 20px"
                />
                <span style="margin-left: 10px; font-size: 18px">（含）次</span>
                <el-select
                  v-model="form.region"
                  placeholder="请选择活动区域"
                  style="width: 10%; height: 25px; margin-left: 30px"
                >
                  <el-option label="按次数" value="1"></el-option>
                  <el-option label="按旷工" value="2"></el-option>
                  <el-option label="按固定金额" value="3"></el-option>
                </el-select>
                <el-input
                  v-model="form.day"
                  style="width: 10%; margin-left: 20px"
                />
                <span
                  style="margin-left: 10px; font-size: 18px"
                  v-if="form.region === '1'"
                  >元/次</span
                >
                <span
                  style="margin-left: 10px; font-size: 18px"
                  v-if="form.region === '2'"
                  >小时</span
                >
                <span
                  style="margin-left: 10px; font-size: 18px"
                  v-if="form.region === '3'"
                  >元/月</span
                >
                <span style="margin-left: 30px; color: blueviolet">添加</span><br/>
                <!-- 第二行 -->
                  <el-input
                    value="4"
                    style="width: 10%; margin-left: 117px;margin-top: 20px;"
                    disabled="true"
                  />
                  <span style="margin-left: 10px; font-size: 18px">至</span>
                  <el-input
                    v-model="form.day1"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span style="margin-left: 10px; font-size: 18px"
                    >（含）次</span
                  >
                  <el-select
                    v-model="form.region"
                    placeholder="请选择活动区域"
                    style="width: 10%; height: 25px; margin-left: 30px"
                  >
                    <el-option label="按次数" value="1"></el-option>
                    <el-option label="按旷工" value="2"></el-option>
                    <el-option label="按固定金额" value="3"></el-option>
                  </el-select>
                  <el-input
                    v-model="form.days1"
                    style="width: 10%; margin-left: 20px"
                  />
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '1'"
                    >元/次</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '2'"
                    >小时</span
                  >
                  <span
                    style="margin-left: 10px; font-size: 18px"
                    v-if="form.region === '3'"
                    >元/月</span
                  >
                  <span style="margin-left: 30px; color: blueviolet">添加</span>
                  <span style="margin-left: 20px; color: red">删除</span>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <el-card class="box-card1">
        <el-button plain @click="$router.push('/home/works')">返回</el-button>
        <el-button plain>取消</el-button>
        <el-button type="primary" plain>保存</el-button>
      </el-card>
    </div>
  </div>
</template>
        
<script>
export default {
  data() {
    return {
      //新增缺卡扣款规则
      ruleForm: {
        name: "",
        delivery: true,
      },
      //新增缺卡扣款规则输入的规范
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      //新增缺卡扣款规则的多行文本框
      textarea2: "",
      //判断缺卡扣款的表单是否显示
      checkbox1: false,
      //缺卡扣款的数据
      form: {
        region: "1",
        resource: 1,
        day: "8",
        days: "0",
        days1: "8",
        day1:'0'
      },
    };
  },
  methods: {
    //判断缺卡扣款是否显示的方法
    shows() {
      let div2 = document.querySelector(".div2");
      this.checkbox1 = !this.checkbox1;
      if (this.checkbox1) {
        div2.style.display = "none";
      } else {
        div2.style.display = "block";
      }
    },
  },
};
</script>
        
<style scoped>
.span1 {
  font-size: 18px;
  font-weight: bold;
}
.box-card {
  width: 80%;
}
.input1 {
  width: 450px;
  height: 35px;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
}
.box-card1 {
  width: 100%;
}
.div1 {
  margin-top: 20px;
  margin-bottom: 100px;
}
.textarea1 {
  width: 50%;
}
</style>